<template>
  <div class="bigbox">
    <!-- 大背景图 -->
    <img class="image1" src="./img/pc/bc.jpg" alt="" />
    <!-- 题目显示外盒子 -->
    <div class="imgbox">
      <img class="image2" src="./img/pc/infomation.png" alt="" />
    </div>
    <!-- 左边文字盒子 -->
    <div class="wordbox">
      <img class="image3" src="./img/pc/anther.png" alt="" />
    </div>
    <!-- 公布名字盒子 -->
    <div class="smabox">
      <img class="image4" src="./img/pc/listname.png" alt="" />
    </div>
    <!-- 二维码盒子 -->
    <div class="erbox">
      <img class="image5" src="./img/assets(1)/computed.png" alt="" />
    </div>
    <!-- 标题题目盒子 -->
    <div class="grbox">
      <img class="image6" src="./img/pc/tip.svg" alt="" />
    </div>
    <!-- 开始盒子 -->
    <div class="gxbox">
      <img class="image7" :src="kaishi" alt="" @click="updown(koo)" />
    </div>
    <!-- 公布答案盒子 -->
    <div class="gfbox">
      <img
        class="image8"
        src="./img/pc/answer.png"
        alt=""
        @click="answerup(guchi)"
      />
    </div>
    <!-- 倒计时盒子 -->
    <div class="ghbox">
      <img class="image9" src="./img/pc/time.png" alt="" />
      <div class="timebox">{{ time }}</div>
    </div>
    <!-- 显示题目中盒子 -->
    <div class="gtbox">
      <div v-html="firstup"></div>
    </div>
    <div @click="lop">
      <comchild v-if="girl" :send="tips[firstji].answer"></comchild>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      girl: false, //控制发布答案显示
      time: 10,
      timeup: null, //定时器id
      kaishi: require("./img/pc/start.svg"),
      xiatip: require("./img/pc/next.svg"),
      tips: [
        {
          subject: `<h3>1、资产、负债和所有者权益是()。</h3> A、表示企业经营成果的会计要素 <br></br> B、表示企业经营状况的会计要素<br></br> &nbspC、表示企业财务状况的会计要素 <br></br> D、表示企业现金流量的会计要素`,
          answer: "C",
        },
        {
          subject: `<h3>2、下列各项中引起资产和权益同时增加的经济业务是()。</h3> A、购入材料,货款未付 <br></br> B、以银行存款支付采购办公用品款<br><br>&nbspC、以银行存款偿还银行借款<br><br> D、用银行存款购入机器一台`,
          answer: "A",
        },
        {
          subject: `<h3>3、不同形态的资产的流动性不同，其获利能力也就不同，下面说法中正确的是（　）。</h3>A、流动性越高，其获利能力可能越高 <br><br>B、流动性越高，其获利能力可能越低 <br><br>C、流动性越低，其获利能力可能越低 <br><br>D、资产的获利能力与流动性成正比
`,
          answer: "B",
        },
        {
          subject: `<h3>4、管理会计的服务对象侧重于（　）。</h3>A、股东 <br><br>B、外部集团<br></br>C、债权人<br></br>D、企业内部的经营管理
`,
          answer: "D",
        },
        {
          subject: `<h3>5、下列不需要进行会计处理的业务有（　）。<br></h3>A、用盈余公积转增资本<br><br>B、用资本公积转增资本<br><br>C、用税前利润补亏<br><br>D、用税后利润补亏<br><br>E、发放股票股利`,
          answer: "CDE",
        },
        {
          subject: `<h3>6 、外购资产，必须先通过（　）进行核算，然后再进行转固处理。</h3>`,
          answer: "在建工程",
        },
        {
          subject: `<h3>7、企业出售无形资产发生的净损失，应当计入（　）。<h3/>`,
          answer: "营业外支出",
        },
        {
          subject: `<h3>8、企业对未使用、不需用的固定资产也应计提折旧，计提的折旧计入（　）。</h3>`,
          answer: "管理费用",
        },
        {
          subject: `<h3>9、工资薪金百分八，超过部分可结转。（猜一个政策）</h3>`,
          answer: "职工教育经费",
        },
        {
          subject: `<h3>10、一子每月享一千，多个子女皆可享。（猜一个个税专项附加扣除项目）</h3>`,
          answer: "子女教育",
        },
        {
          subject: `<h3>11、交完房租不吃土，在沪一月一千五。（猜一个税专项附加扣除项目）</h3>`,
          answer: "住房租金",
        },
        {
          subject: `<h3>12、四项服务过半百，进项再抵十个点。（猜一个政策）</h3>`,
          answer: "加计抵减",
        },
      ],
      firstji: 0, //第一页
      firstup: "", //第一条数据
      guchi: true, //控制按钮能不能点击
      koo: false,
    };
  },
  methods: {
    updown() {
      //题目切换
      if (this.guchi == true) {
        this.firstup = this.tips[this.firstji].subject;
        this.firstji++;
        this.guchi = !this.guchi;
      }

      this.kaishi = this.xiatip; //开始按钮变成下一题按钮
      //倒计时
      if (this.timeup != null) {
        return;
      }
      this.timeup = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(this.timeup);
          this.timeup = null;
          this.time = 10;
          this.guchi = true;
          this.koo = true;
        }
      }, 1000);
    },
    answerup() {
      if (this.koo == true && this.time == 10) {
        console.log(this.time);
        this.girl = true;
        this.koo = !this.koo;
      }
    },
    lop() {
      this.girl = false;
      this.koo = true;
    },
  },
};
</script>

<style  scoped>
/* 大背景盒子 */
.bigbox {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  height: 750px;
  padding: 0;
}
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7,
.image8,
.image9,
.image10 {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 题目显示外盒子 */
.imgbox {
  position: absolute;
  top: 150px;
  left: 220px;
  width: 800px;
  height: 400px;
  /* outline: 2px solid black; */
}
/* 左边文字盒子 */
.wordbox {
  position: absolute;
  top: 10px;
  left: 80px;
  width: 100px;
  height: 400px;
}
/* 公布名字盒子 */
.smabox {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 500px;
  left: 320px;
}
/* 二维码盒子 */
.erbox {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 420px;
  left: 50px;
}
/* 标题题目盒子 */
.grbox {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 480px;
  top: -50px;
}
/* 开始盒子 */
.gxbox {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 500px;
  left: 520px;
}
/* 公布答案盒子 */
.gfbox {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 500px;
  left: 720px;
}
/* 倒计时盒子 */
.ghbox {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 1015px;
  top: 130px;
}
/* 倒计时盒子 */
.timebox {
  position: absolute;
  text-align: center;
  line-height: 130px;
  font-size: 40px;
  color: white;
  left: 50px;
}
/* 显示题目中盒子 */
.gtbox {
  position: absolute;
  width: 580px;
  height: 310px;
  top: 185px;
  left: 300px;
  color: white;
  font-size: 20px;
}
</style>